<template>
  <div id="app">
    <!-- 站点头部 -->
    <header class="site-header">
      <div class="container">
        <h1 class="site-title">yu的博客</h1>
        <div class="site-header-right">
          <p class="site-subtitle">分享所见所思</p>
          <button id="btnOpenLogin" @click="openModal">登录</button>
        </div>
      </div>
    </header>

    <!-- 主体布局 -->
    <main class="site-main container">
      <div class="posts">
        <div class="post" v-for="post in posts" :key="post.id">
          <!-- 左侧时间+评论 -->
          <aside class="post-meta">
            <div class="post-date">
              <span class="month">{{ post.month }}</span>
              <span class="day">{{ post.day }}</span>
              <span class="year">{{ post.year }}</span>
            </div>
            <a class="post-comments" :href="'#comments-' + post.id" :title="'查看评论'">{{ post.comments }} 条评论</a>
          </aside>

          <!-- 右侧文章内容 -->
          <div class="post-content">
            <h2 class="post-title"><a :href="post.link">{{ post.title }}</a></h2>
            <div class="post-excerpt">
              <p>{{ post.excerpt }}</p>
            </div>
          </div>
        </div>
      </div>

      <!-- 侧栏 -->
      <aside class="sidebar">
        <div class="widget widget-search">
          <h3 class="widget-title">搜索</h3>
          <form @submit.prevent="handleSearch" class="search-form">
            <input v-model="searchQuery" type="text" placeholder="输入关键词..." aria-label="搜索关键词" />
            <button type="submit">搜索</button>
          </form>
        </div>
        <div class="widget widget-recent-posts">
          <h3 class="widget-title">近期文章</h3>
          <ul>
            <li v-for="recentPost in recentPosts" :key="recentPost.id">
              <a :href="recentPost.link">{{ recentPost.title }}</a>
            </li>
          </ul>
        </div>
        <div class="widget widget-recent-comments">
          <h3 class="widget-title">近期评论</h3>
          <ul>
            <li v-for="comment in recentComments" :key="comment.id">
              <a :href="comment.link">{{ comment.author }}：{{ comment.content }}</a>
            </li>
          </ul>
        </div>
        <div class="widget widget-archives">
          <h3 class="widget-title">文章归档</h3>
          <ul>
            <li v-for="archive in archives" :key="archive.id">
              <a :href="archive.link">{{ archive.period }}</a>
            </li>
          </ul>
        </div>
        <div class="widget widget-categories">
          <h3 class="widget-title">分类目录</h3>
          <ul>
            <li v-for="category in categories" :key="category.id">
              <a :href="category.link">{{ category.name }}</a>
            </li>
          </ul>
        </div>
      </aside>
    </main>

    <!-- 页脚 -->
    <footer class="site-footer">
      <div class="container">
        <p>© 2025 我的博客 · 保留所有权利</p>
      </div>
    </footer>

    <!-- 登录弹窗 -->
    <div v-if="showLoginModal" class="login-mask" @click="closeModal"></div>
    <div v-if="showLoginModal" class="login-modal">
      <h3>登录</h3>
      <div class="form-row">
        <label for="loginUser">账号</label>
        <input v-model="loginForm.username" id="loginUser" type="text" placeholder="请输入账号" />
      </div>
      <div class="form-row">
        <label for="loginPass">密码</label>
        <input v-model="loginForm.password" id="loginPass" type="password" placeholder="请输入密码" @keypress.enter="handleLogin" />
      </div>
      <div class="actions">
        <button @click="closeModal">取消</button>
        <button @click="handleLogin">登录</button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue';

// 登录相关状态
const showLoginModal = ref(false);
const loginForm = reactive({
  username: '',
  password: ''
});

// 搜索相关状态
const searchQuery = ref('');

// 文章数据
const posts = ref([
  {
    id: 1,
    title: '使用 HTML/CSS 搭建博客布局',
    link: '#',
    excerpt: '本文演示了一个简洁的博客页面布局：顶部标题，文章区的左侧时间与评论垂直排列，右侧为文章内容；右侧为大侧栏，包含搜索、近期文章、近期评论、文章归档与分类目录。',
    month: '9月',
    day: '11',
    year: '2025',
    comments: 12
  },
  {
    id: 2,
    title: '第二篇文章示例',
    link: '#',
    excerpt: '用于演示多篇文章时的排版与间距。你可以根据需要动态渲染这些数据。',
    month: '8月',
    day: '28',
    year: '2025',
    comments: 3
  }
]);

// 近期文章数据
const recentPosts = ref([
  { id: 1, title: '使用 HTML/CSS 搭建博客布局', link: '#' },
  { id: 2, title: '第二篇文章示例', link: '#' },
  { id: 3, title: '如何撰写高质量技术博客', link: '#' },
  { id: 4, title: '前端性能优化清单', link: '#' }
]);

// 近期评论数据
const recentComments = ref([
  { id: 1, author: '小明', content: '布局很清晰！', link: '#comments-1' },
  { id: 2, author: 'Lucy', content: '期待更多内容', link: '#comments-2' },
  { id: 3, author: 'Allen', content: '样式很简洁', link: '#' }
]);

// 文章归档数据
const archives = ref([
  { id: 1, period: '2025年 9月', link: '#' },
  { id: 2, period: '2025年 8月', link: '#' },
  { id: 3, period: '2025年 7月', link: '#' },
  { id: 4, period: '2025年 6月', link: '#' }
]);

// 分类目录数据
const categories = ref([
  { id: 1, name: '前端', link: '#' },
  { id: 2, name: '后端', link: '#' },
  { id: 3, name: '工具与效率', link: '#' },
  { id: 4, name: '随笔', link: '#' }
]);

// 方法
const openModal = () => {
  showLoginModal.value = true;
};

const closeModal = () => {
  showLoginModal.value = false;
  loginForm.username = '';
  loginForm.password = '';
};

const handleLogin = () => {
  const { username, password } = loginForm;
  console.log('登录账号:', username, '登录密码:', password);
  alert('登录成功');
  localStorage.setItem('loginUser', username);
  localStorage.setItem('loginPass', password);
  closeModal();
};

const handleSearch = () => {
  console.log('搜索关键词:', searchQuery.value);
  // 这里可以添加搜索逻辑
};
</script>

<style scoped>
* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  color: #222;
  background-color: #fafafa;
  line-height: 1.6;
}

.container {
  width: 92%;
  max-width: 1160px;
  margin: 0 auto;
}

/* 顶部标题样式 */
.site-header {
  background: #d027c4;
  color: #fff;
  padding: 36px 0 28px;
}

.site-title {
  margin: 0;
  font-size: 32px;
}

.site-subtitle {
  margin: 8px 0 0;
  opacity: 0.9;
}

/* 主体两栏布局：使用通用 Flex */
.site-main {
  display: flex;
  padding: 28px 0 40px;
}

/* 文章列表区 */
.posts {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.posts>.post {
  margin-bottom: 24px;
}

.post {
  display: flex;
  background: #fff;
  border: 1px solid #e5e7eb;
  padding: 18px;
}

/* 左侧：时间 + 评论（垂直排列） */
.post-meta {
  width: 140px;
  flex: 0 0 140px;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-right: 20px;
}

.post-content {
  flex: 1 1 auto;
}

.post-date {
  width: 100%;
  text-align: center;
  border: 1px solid #e5e7eb;
  padding: 10px 6px;
  background: #f8fafc;
  margin-bottom: 12px;
}

/* 统一日期与评论宽度与显示方式 */
.post-date,
.post-comments {
  display: block;
  width: 100%;
}

.post-date .month {
  font-weight: 600;
  color: #bb2fc3;
}

.post-date .day {
  font-size: 28px;
  font-weight: 700;
}

.post-date .year {
  font-size: 12px;
  color: #6b7280;
}

.post-comments {
  display: block;
  width: 100%;
  text-align: center;
  text-decoration: none;
  color: #111827;
  background: #eef2ff;
  border: 1px solid #c7d2fe;
  padding: 8px 10px;
}

/* 右侧：正文 */
.post-title {
  margin: 0 0 6px;
  font-size: 22px;
}

.post-title a {
  color: #111827;
  text-decoration: none;
}

.post-title a:hover {
  color: #4f46e5;
  text-decoration: underline;
}

.post-excerpt {
  color: #4b5563;
}

/* 侧栏 */
.sidebar {
  width: 320px;
  margin-left: 20px;
  display: flex;
  flex-direction: column;
}

.sidebar>.widget {
  margin-bottom: 18px;
}

.widget {
  background: #fff;
  border: 1px solid #e5e7eb;
  padding: 16px;
}

.widget-title {
  margin: 0 0 12px;
  font-size: 18px;
}

.widget ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.widget li {
  margin: 8px 0;
}

.widget a {
  color: #4f46e5;
  text-decoration: none;
}

.widget a:hover {
  text-decoration: underline;
}

/* 搜索栏 */
.search-form {
  display: flex;
}

.search-form>* {
  margin-right: 8px;
}

.search-form>*:last-child {
  margin-right: 0;
}

.search-form input[type="text"] {
  flex: 1;
  padding: 10px 12px;
  border: 1px solid #e5e7eb;
}

.search-form button {
  padding: 10px 14px;
  background: #4f46e5;
  color: #fff;
  border: none;
  cursor: pointer;
}

/* 页脚 */
.site-footer {
  border-top: 1px solid #e5e7eb;
  color: #6b7280;
  padding: 20px 0 40px;
  font-size: 14px;
}

/* 登录相关样式 */
#btnOpenLogin {
  margin-top: 12px;
  padding: 8px 12px;
  background: #fff;
  color: #4f46e5;
  border: 1px solid #fff;
  cursor: pointer;
}

.site-header-right{
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.login-mask {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: rgb(163, 163, 163,0.5);
}

.login-modal {
  position: fixed;
  left: 50%;
  top: 20%;
  transform: translateX(-50%);
  width: 320px;
  background: #fff;
  border: 1px solid #e5e7eb;
  padding: 16px;
}

.login-modal h3 {
  margin: 0 0 12px;
  font-size: 18px;
}

.login-modal .form-row {
  margin-bottom: 12px;
}

.login-modal label {
  display: block;
  margin-bottom: 6px;
}

.login-modal input {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid #e5e7eb;
}

.login-modal .actions {
  text-align: right;
}

.login-modal button:first-child {
  margin-right: 8px;
  padding: 8px 12px;
  background: #e5e7eb;
  border: none;
  cursor: pointer;
}

.login-modal button:last-child {
  padding: 8px 12px;
  background: #4f46e5;
  color: #fff;
  border: none;
  cursor: pointer;
}
</style>